<template>
  <div class="date-picker">
    <el-date-picker
      class="btn1"
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      @change="change"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: []
    }
  },
  methods: {
    change (value) {
      if (value) {
        const obj = {t1: value[0], t2: value[1]}
        this.$emit('getData', obj)
      }
    }
  }
}
</script>

<style>
.date-picker .el-date-editor--daterange.el-input__inner {
  width: 240px;
  padding: 3px 0 3px 10px;
  line-height: 28px;
}
.date-picker .el-date-editor--daterange.el-input__inner:hover {
  border: 1px solid #2f8ae6;
}
.date-picker .el-date-editor--daterange.el-input__inner input {
  background: none;
  color: #4dd5ff;
}
.date-picker .el-date-editor .el-range__icon, .date-picker  .el-date-editor .el-range__close-icon, .date-picker  .el-date-editor .el-range-separator {
  color: inherit;
  line-height: 14px;
}
.date-picker .el-date-editor .el-range-separator{line-height: 22px;}
.el-picker-panel.el-popper, .el-picker-panel.el-popper .el-date-range-picker {
  width: 450px!important;
  font-weight: 400;
}
/*下拉*/
.el-picker-panel.el-popper .el-picker-panel__body {
  width: 450px!important;
  min-width: 450px!important;
}
.el-picker-panel.el-popper .el-date-range-picker__header div {
  font-size: 14px;
  color: #ffe98f;
}
.el-picker-panel.el-popper .el-date-table td {
  height: 20px;
}
.el-picker-panel.el-popper .el-date-table td div {
  height: 20px;
  padding: 0;
}
.el-picker-panel.el-popper .el-date-table td span {
  width: 20px;
  height: 20px;
  line-height: 20px;
}
.el-picker-panel.el-popper {
  background: linear-gradient(to right, #184796 0%, #0d2c71 100%);
  border: 1px solid #2f8ae6;
  color: #4dd5ff;
}
.el-picker-panel.el-popper .popper__arrow {
  display: none;
}
.el-picker-panel.el-popper .el-date-table td.next-month, .el-picker-panel.el-popper .el-date-table td.prev-month {
  color: #297da5;
}
.el-picker-panel.el-popper .el-date-table th, .el-picker-panel.el-popper .el-picker-panel__icon-btn{
  color: #33d5ff;
}
.el-picker-panel.el-popper .el-date-range-picker__content.is-left {
  border: none;
}
.el-picker-panel.el-popper .el-date-table th {
  border-color: #1d519e;
}
.el-picker-panel.el-popper .el-date-table td.available:hover, .el-picker-panel.el-popper .el-picker-panel__icon-btn:hover {
  color: #00fcff;
  transform: scale(1.2);
}
.el-picker-panel.el-popper .el-date-table td.today span{
  color: #ffe98f;
  font-weight: inherit;
}
.el-picker-panel.el-popper .el-date-table td.in-range div, .el-picker-panel.el-popper .el-date-table td.in-range div:hover, .el-picker-panel.el-popper .el-date-table.is-week-mode .el-date-table__row.current div, .el-picker-panel.el-popper .el-date-table.is-week-mode .el-date-table__row:hover div {
  background: #194d9a;
  color: #3fa6b7;
}
.el-picker-panel.el-popper .el-date-table td.in-range:hover {
  color: #1b62b9;
  transform: scale(1);
}
.el-picker-panel.el-popper .el-date-table td.end-date span, .el-picker-panel.el-popper .el-date-table td.start-date span {
  background: #ffe98f;
  color: #0f3b7c;
}
.el-picker-panel.el-popper input::input-placeholder {
  color: #b8c4ce!important;
}
.el-picker-panel.el-popper input::-webkit-input-placeholder {
color: #4dd5ff!important;
}
.el-picker-panel.el-popper input:-moz-placeholder {
color: #4dd5ff!important;
}
.el-picker-panel.el-popper input::-moz-placeholder {
color: #4dd5ff!important;
}
.el-picker-panel.el-popper input:-ms-input-placeholder {
color: #4dd5ff!important;
}

</style>
